<template>
  <div class="main-layout">
    <header class="header">
      <div class="logo">待办事项管理系统</div>
      <nav class="nav">
        <router-link to="/" exact-active-class="router-link-active" active-class="">首页</router-link>
        <router-link to="/dashboard" exact-active-class="router-link-active" active-class="">数据看板</router-link>
        <router-link to="/profile" exact-active-class="router-link-active" active-class="">个人中心</router-link>
      </nav>
      <div class="user-actions">
        <span v-if="userStore.user">{{ userStore.user.username }}</span>
        <el-button type="text" @click="userStore.logout">退出登录</el-button>
      </div>
    </header>
    
    <main class="content">
      <router-view />
    </main>
    
    <footer class="footer">
      <p>© 2025 待办事项管理系统</p>
    </footer>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useUserStore } from '../stores/user'

const userStore = useUserStore()

onMounted(() => {
  if (userStore.isLoggedIn && !userStore.user) {
    userStore.fetchUserProfile()
  }
})
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav {
  display: flex;
  gap: 1.5rem;
}

.nav a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem;
}

.nav a.router-link-active {
  color: #409eff;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 1.5rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
  min-height: calc(100vh - 120px); /* 减去头部和底部的高度 */
}

.footer {
  padding: 1rem;
  text-align: center;
  background-color: #f5f5f5;
  margin-top: auto;
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .nav {
    width: 100%;
    justify-content: space-around;
  }
  
  .content {
    padding: 1rem;
  }
}
</style>